<template>
  <div class="message-input">
    <div class="message-input-bottom">
      <textarea
        v-model="inputMessage"
        placeholder="请输入消息"
        rows="1"
        @keyup.enter="sendMessage"
        @input="inputTextarea"
        @keydown="handleKeyDown"
      ></textarea>
      <div class="sendbottom-actions">
        <!-- <el-button @click="wenjian" class="button-icon-home">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenjian"></use>
            </svg>
          </el-button> -->

        <el-tooltip
          class="item"
          effect="dark"
          content="请输入你的问题"
          placement="top"
          ref="tooltipRef"
        >
          <el-button
            @click="sendMessage"
            class="button-icon-bottom"
            :disabled="isDisabled"
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tijiao4"></use>
            </svg>
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: "",
      isDisabled:false
    };
  },
  methods: {
    sendMessage() {
      if (this.inputMessage.trim()) {
        this.$emit("send-message", this.inputMessage);
        this.inputMessage = "";
      }
    },
    inputTextarea(val) {
      console.log(val.target.value, "val", this.inputMessage);
      if (this.inputMessage.length >= 1) {
        this.isDisabled = false;
      }
    },
    handleKeyDown(event) {
      if (event.key === "Enter" && this.inputMessage.trim() === "") {
        event.preventDefault();
        this.$refs.tooltipRef.show();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-button {
  border: none;
  margin: 0;
}
.message-input {
  display: flex;
  justify-content: center;
  align-items: center;
  // background: rgb(243 244 246;);
}
textarea {
  width: 100%;
  height: 80px;
  border-radius: 4px;
  resize: none;
  font-size: 20px;
  /* 去除边框 */
  border: none;
  /* 去除选中后的边框 */
  outline: none;
  background: rgb(243 244 246;);
}
.message-input-bottom {
  border: 1px solid #dce0e9;
  border-radius: 24px;
  width: 800px;
  background: rgb(243 244 246;);
  .sendbottom-actions {
    display: flex;
    justify-content: right;
    align-items: center;
    .button-icon-bottom {
      background: rgb(243 244 246;);
      margin-right: 10px;
    }
  }
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>